<template>
  <view class="p-h24 p-b24 bot-confirm">
    <view class="p-v40 flex">
      <text class="text-700-132">请确认是否通知面试此岗位</text>
    </view>
    <swiper class="swiper-viewer" indicator-dots :current="current" @change="handleChange">
      <swiper-item v-for="(info, index) in list">
        <view class="flex">
          <!-- <image class="square-148 r-10" :src="info.images" mode="aspectFill" /> -->
          <view class="flex-1 p-l20 overflow-hidden">
            <view class="flex">
              <text class="text-700-128 flex-1 truncate">{{ info.title }} {{ info.fringe }}</text>
              <text class="text-700-528">{{ info.money_range }}</text>
            </view>
            <view class="flex m-t12">
              <view class="flex p-h10 m-r10 r-4 h-44 tag">
                <text class="text-400-324">{{ info.area }}</text>
              </view>
              <view class="flex p-h10 m-r10 r-4 h-44 tag">
                <text class="text-400-324">{{ info.lowest_education }}</text>
              </view>
            </view>
            <view class="flex m-t12 overflow-hidden">
              <text class="text-400-326 flex-1 truncate">{{ info.address }}</text>
              <text class="text-400-326">{{ info.times }} 发布</text>
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>
    <view class="relative m-b20 title">
      <text class="text-700-132">面试时间确认</text>
    </view>
    <view class="m-b40 bg-1 r-10 p-a30 ">
      <view class="flex">
        <text class="text-400-128">日期：</text>
        <view class="flex-1 p-h20 h-80 flex-sb field" @click="openPicker('date')">
          <text v-if="pickedDate" class="text-400-128">{{ pickedDate }}</text>
          <text v-else class="text-400-328">请选择</text>
          <image class="square-36" src="/static/images/public/calendar.png" mode="aspectFit"></image>
        </view>
      </view>
      <view class="flex m-t20">
        <text class="text-400-128">时间：</text>
        <view class="flex-1 p-h20 h-80 flex-sb field" @click="openPicker('time')">
          <text v-if="pickedTime" class="text-400-128">{{ pickedTime }}</text>
          <text v-else class="text-400-328">请选择</text>
          <image class="square-36" src="/static/images/public/clock.png" mode="aspectFit"></image>
        </view>
      </view>
    </view>
    <view class="m-t50 flex">
      <view class="r-10 flex-c flex-1 h-76 confirm-btn" @click="jump">
        <text class="text-700-228">通知</text>
      </view>
    </view>
    <up-notify ref="uNotify"></up-notify>
    <up-datetime-picker :show="showPicker" v-model="pickedValue" :mode="pickerMode" closeOnClickOverlay
      @cancel="closePicker" @close="closePicker" @confirm="onConfirm"></up-datetime-picker>
  </view>
</template>

<script lang="ts" setup>
import { defineEmits, ref, nextTick } from 'vue'
import { timeFormat } from '@/utils/utils'
const props = defineProps({
  id: {
    type: String,
    default: ""
  }
})
const showPicker = ref(false)
type PickerMode = 'date' | 'time'
const pickerMode = ref<PickerMode>('date')
const pickedValue = ref('')
const pickedDate = ref('')
const pickedTime = ref('')
const current = ref(0)
const uNotify = ref()
const list = ref([])
const emit = defineEmits<{
  (e: 'close'): void;
}>()

function notifyMessage(title: string) {
  uNotify.value.show({
    top: 10,
    type: 'error',
    color: '#fff',
    bgColor: '##F87470',
    message: title,
    duration: 1000 * 3,
    fontSize: 16,
    safeAreaInsetTop: true
  })
}
//动态监听
const handleChange = (e) => {
  current.value = e.detail.current
}
//选择日期
const jump = async () => {
  console.log(current.value)
  console.log(list.value[current.value])
  if (!pickedDate.value) {
    return notifyMessage('请选择日期')
  }
  if (!pickedTime.value) {
    return notifyMessage('请选择时间')
  }
  const data = {
    "td_id": props.id,
    "date": pickedDate.value,
    "time": pickedTime.value
  }
  const res = await uni.$u.post("/resume/mianshi", data)
  if (res.code == 1) {
    uni.showToast({ title: res.msg })
    emit('close')
  } else {
    notifyMessage(res.msg)
  }

}
//弹窗
const openPicker = (mode: PickerMode) => {
  pickerMode.value = mode

  let picked = ''

  if (mode === 'date') {
    const date = pickedDate.value ? +new Date(pickedDate.value) : +Date.now()
    picked = timeFormat(date)
  } else if (mode === 'time') {
    const dateTime = pickedTime.value ? new Date(`${timeFormat(Date.now())} ${pickedTime.value}`) : Date.now()
    picked = timeFormat(+dateTime, 'hh:MM')
  }

  pickedValue.value = picked
  nextTick(() => {
    showPicker.value = true
  })
}
//关闭
const closePicker = () => {
  showPicker.value = false
}
//确认
const onConfirm = (e: any) => {
  pickedValue.value = e.value
  if (e.mode === 'date') {
    pickedDate.value = timeFormat(+new Date(e.value))
  } else {
    pickedTime.value = e.value
  }
  showPicker.value = false
}
//获取列表
async function getList() {
  const res = await uni.$u.get('/position/mylst')
  list.value = res.data
}
getList()
</script>

<style lang="scss" scoped>
.swiper-viewer {
  height: 100px;
}

.bot-confirm {
  width: 100vw;
}

.tag {
  background-color: $bg-color-6;
}

.confirm-btn {
  background-color: $bg-color-2;
}
</style>
